<template>
  <el-tabs v-model="activeName">
    <el-tab-pane :key="'first'" label="基本信息" name="first">
      <el-row>
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">身份证号</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_basic_info_student_worker__id_card }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">出生年月</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_basic_info_student_worker__birthday }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">曾用名</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_basic_info_student_worker__name_used }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">性别</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_basic_info_student_worker__sex }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">民族</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_basic_info_student_worker__nation }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">籍贯</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_basic_info_student_worker__native_place }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">籍贯类型</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{
              this.tableData
                .student_basic_info_student_worker__native_place_type
            }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">政治面貌</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{
              this.tableData
                .student_basic_info_student_worker__political_outlook
            }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">联系电话</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_basic_info_student_worker__mobile }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">QQ号</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_basic_info_student_worker__QQ }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">照片路径</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_basic_info_student_worker__photo_url }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">家长姓名</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_basic_info_student_worker__parent_name }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">家长电话</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{
              this.tableData.student_basic_info_student_worker__parent_mobile
            }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">家庭住址</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_basic_info_student_worker__home_address }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">高中档案</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{
              this.tableData
                .student_basic_info_student_worker__high_school_archives
            }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">高中毕业院校</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_basic_info_student_worker__high_school }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">辅导员</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.employee_information__name }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">辅导员电话</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.employee_information__mobile_phone }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">床位号</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{
              this.tableData.student_basic_info_student_worker__bed_id
                ? this.tableData.student_basic_info_student_worker__bed_id
                : "无"
            }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">学工学籍状态</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{
              this.tableData
                .student_basic_info_student_worker__student_status_change_state
            }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">在读年级</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_basic_info_student_worker__grade }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">在读班级</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{
              this.tableData.student_status_educational__administrative_class
            }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">是否走读生</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{
              this.tableData.student_basic_info_student_worker__dormitory_status
            }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">是否在校</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{
              this.tableData
                .student_basic_info_student_worker__status_of_student_status
            }}
          </div></el-col
        >
      </el-row>
    </el-tab-pane>
    <el-tab-pane :key="'second'" label="学籍信息" name="second">
      <el-row>
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">身份证号</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__id_card }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">学院</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__college }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">系部</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__department }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">学号</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__stu_id }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">专业名称</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__major }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">专业代码</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__major_code }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">培养方向</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__training_direction }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">专业方向</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{
              this.tableData.student_status_educational__professional_direction
            }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">专业类别</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__major_category }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">学历层次</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__education_level }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">学制</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__educational_system }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">学习年限</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__study_year }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">考生类别</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__examinee_type }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">科类</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__families }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">学习形式</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__learning_form }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">入学日期</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__admission_time }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">预计毕业时间</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{
              this.tableData
                .student_status_educational__expected_graduation_time
            }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">毕业证编号</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{
              this.tableData
                .student_status_educational__graduation_certificate_no
            }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">考生号</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__examinee_number }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">异动类别</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{
              this.tableData
                .student_status_educational__educational_administration_status
            }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">是否注册</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__register_or_no }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">可申请毕业</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__apply_graduation }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">是否留学生</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__overseas_student }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">在籍年级</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__registered_grade }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">在籍班级ID</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__registered_class_id }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">行政班</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{
              this.tableData.student_status_educational__administrative_class
            }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">当前所在级</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__grade_now }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">学信在籍</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__xuexin_registered }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">学院学籍状态</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.student_status_educational__college_status }}
          </div></el-col
        >
      </el-row>
    </el-tab-pane>
    <el-tab-pane :key="'third'" label="缴费信息" name="third">
      <el-row>
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">身份证号</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.payment_information__id_card }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">学年</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.payment_information__school_year }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">费用类型</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.payment_information__cost_type }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">应收金额</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.payment_information__amount_receivable }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">实收金额</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.payment_information__paid_in_amount }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-darks">未收金额</div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple-dark">
            {{ this.tableData.payment_information__outstanding_amount }}
          </div></el-col
        >
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  props: {
    tableData: {},
  },
  data() {
    return {
      activeName: "first",
    };
  },
};
</script>
<style>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple-darks {
  background: #8abaeb;
}
.grid-content {
  border-radius: 5px;
  min-height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.row-bg {
  background-color: #f9fafc;
}
</style>
